<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #ccc;
            text-align: center;
            line-height: 200px;
            font-size: 20px;
        }
    </style>
</head>
<body>

    <div class="box">0</div>

    <script>
        // 计数器变量
        var count = 0;
        // 定义函数
        var add = function(){ //相当于回调函数 （符合条件才调用的函数）
            count ++;
            document.querySelector(".box").innerText = count;
        }
        // 调用函数
        // add();
        // add();
        // add();
        // add();
        // add();
 
        // 定义变量 记录定时器函数   1秒 = 1000毫秒
        // var timer = setInterval(匿名函数,毫秒值)
        // var timer = setInterval(function(){},1000)
        // var timer = setInterval(add,1000);// 方式1 不能把原型的方法作为参数
        var timer = window.setInterval(function(){  // 方式2
            add();
            // 当计数器变量等于10，就停止执行定时器函数
            if(count == 10 ) {
                // 停止定时器函数
                window.clearInterval(timer);
                console.log("停止执行函数");
            }
            // console.log(this); //window(牢牢记住)
        },1000);

        // 定时器函数
        // 每隔一段时间（毫秒）执行一次函数（function）
        // 使用定时器函数，先定义变量或属性记录
        // 可以停止调用定时器函数（清除定时器函数）；
    </script>
</body>
</html>